import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class BottomNavigatorBar extends StatefulWidget {
  const BottomNavigatorBar({super.key});

  @override
  State<BottomNavigatorBar> createState() => _BottomNavigatorBarState();
}

class _BottomNavigatorBarState extends State<BottomNavigatorBar> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    //将BottomNavigationBar 用Theme包起来，然后修改data属性，进行如下修改，可以去除点击产生的水波涟漪效果
    return Theme(
        data: ThemeData(
            brightness: Brightness.light,
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent
        ),
        child: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页",),
            BottomNavigationBarItem(icon: Icon(Icons.image_search_outlined), label: "碳索"),
            BottomNavigationBarItem(icon: Icon(Icons.account_circle_outlined), label: "我的"),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.green,
          unselectedItemColor: Colors.grey.shade500,
          showUnselectedLabels: true,
          //取消自带导航栏的 点击局部区域按钮的 字体变大效果
          unselectedFontSize: 12,
          selectedFontSize: 12,
          //取消自带导航栏的 点击局部区域按钮的拉伸效果
          type: BottomNavigationBarType.fixed,
          onTap: _onItemTapped,
        )
    );
  }


  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}



